<div class="page">
    <h1>下拉菜单 Select</h1>
    <div class="line"></div>

    <div class="layui-row">
        <div class="layui-col-md12">
            <h3>下拉菜单基本操作</h3>
            <br>
            <div id="select1"></div>
            <br>
            <button type="button" type="button" class="layui-btn layui-btn-normal" id="selectbutton1_0">get 取值方法</button>
            <button type="button" type="button" class="layui-btn layui-btn-normal" id="selectbutton1_1">set 赋值方法</button>
            <button type="button" type="button" class="layui-btn layui-btn-normal" id="selectbutton1_2">清除选择结果</button>
            <pre class="line-numbers"><code class="language-js">// 简单创建select
var select1 = new icu.formElement.select({
    verify: {  // 验证
        text: '性别', 
        rules: ['notNull']
    },
    data: 'OptionSide:Gender', 
});  
this.$el.find('#select1').append(select1.html);
// 取值方法
this.$el.find('#selectbutton1_0').click(() => {
    select1.get((emsg, value) => {
        if (emsg) {
            icu.alert.error({ text: value });
        } else {
            icu.alert.normal({ text: value });
        };
    });
});
// 赋值方法
this.$el.find('#selectbutton1_1').click(() => {
    select1.set('0');
});
// 清除选择结果
this.$el.find('#selectbutton1_2').click(() => {
    select1.clear();
});
</code></pre>
        </div>
    </div>
    <div class="line"></div>
    <div class="layui-row">
        <div class="layui-col-md12" id="selectbox2">
            <h3>动态赋值方法</h3>
            <br>
            <div id="select2"></div>
            <br>
            <button type="button" type="button" class="layui-btn layui-btn-normal" id="selectbutton2_0">异步赋值（通过数组）</button>
            <button type="button" type="button" class="layui-btn layui-btn-normal" id="selectbutton2_1">异步赋值（通过字典项）</button>
            <pre class="line-numbers"><code class="language-js">var select2 = new icu.formElement.select();  
// 异步赋值（通过数组）
this.$el.find('#selectbutton2_0').click(() => {
    select2.setData([
        { "label": "test1", "value": "test1" },
        { "label": "test2", "value": "test2" }
    ]);
});
// 异步赋值（通过字典项）
this.$el.find('#selectbutton2_1').click(() => {
    // 查找字典项 中 key 值为 Gender 的字典项
    select2.setData('OptionSide:Gender');
});
</code></pre>
        </div>
    </div>
    <div class="line"></div>
    <div class="layui-row">
        <div class="layui-col-md12" id="selectbox2">
            <h3>赋值 取值 相关设置</h3>
            <br>
            <br>
            <div id="select3"></div>
            <br>
            <button type="button" type="button" class="layui-btn layui-btn-normal" id="selectbutton3_0">取值</button>
            <button type="button" type="button" class="layui-btn layui-btn-normal" id="selectbutton3_1">赋值 'id2'</button>
            <pre class="line-numbers"><code class="language-js">
var select3 = new icu.formElement.select({
    setKey : 'id', // 改变赋值时所选择的对象
    getKey : 'object', // 特殊关键字 取值时取得select所选对象 
    showKey : 'name', // 显示用字段
    data : [
        { "name": "name1", "id": "id1" },
        { "name": "name2", "id": "id2" }
    ]
});
// 取值方法
this.$el.find('#selectbutton3_0').click(() => {
    // 根据设置，取值取select 所选的字段
    select1.get((emsg, value) => {
        icu.alert.normal({ text: JSON.stringify(value) });
    });
});
// 赋值方法
this.$el.find('#selectbutton3_1').click(() => {
    // 根据设置中 setkey 中设置 的 'id' 字段 进行赋值
    select1.set('id2');
});
</code></pre>
        </div>
    </div>
    <div class="line"></div>
    <h2>详细说明</h2>
    <pre class="line-numbers"><code class="language-js">// 创建 Select 元素
var selectDeme = new icu.formElement.select({
    className: '', // 自定义元素样式
    // 目前select只支持非空验证。
    verify: {  // verify 对象参照 数据验证规则集合对象 中的说明进行设置
        text: '性别',
        rules: ['notNull']
    },
    showKey: 'label', // 根据子对象的数据 对应Key值进行显示
    showUnSelect: false,// 是否显示置空项 
    // 注 ： 设置置空项后，置空项会默认增加到第一项，下标为 0 ，导致下标取值向后顺延
    UnSelectData: { // 置空项对象值设置
        showName: ' - 请选择性别 - ',
        data: null,
    },
    setKey: 'label', // 根据子对象的数据 对应Key值进行赋值
    getKey: 'object',  // 根据子对象的数据 队形Key值进行取值
    // 注 getKey 可选值除了 Data的默认值外，还可以使用'object' (获取原对象)， 'setKey'(赋值的字段)
    "default": null, // 默认值 可以为下标，或setKey 的对应值
    readonly: false,  // 是否只读
    // 数据来源
    // 数据来源默认为数组
    // 示例 [{ "label": "test1", "value": "test1" }, { "label": "test2", "value": "test2" }]
    // setKey 、 getKey 、 showKey 均为数据来源中子对象的 key值
    // 'OptionSide:Gender' 冒号后面为 options对象可格式化 的取值结果为来源
    // 可根据文档进行自定义设置
    data: 'OptionSide:Gender', 

    // 未选择时显示的提示文字
    placeholder: '- 请选择 -',  // 当未选值时,元素显示内容
    onChange: function () { }, // 当值发生改变时,调用方法
    onError: function () { } // 当值发生错误时(不符合验证时),调用方法
});

// 渲染
$('body').append(selectDeme.html);


// 取值方法
selectDeme.get(function (error, value) {
    if (error) {
        _alert.error({
            text: error
        });
    } else {
        _alert.normal({
            text: JSON.stringify(value)
        });
    };
});

// 根据setKey赋值
selectDeme.set("女");

// 改变Data对象，根据字符串
// 'OptionSide:Gender' 冒号后面为 options对象可格式化 的取值结果为来源
// 可根据文档进行自定义设置
selectDeme.setData("OptionSide:newsType");

// 改变Data对象，根据数组
selectDeme.setData([{ "label": "test1", "value": "test1" }, { "label": "test2", "value": "test2" }]);


// 可异步绑定的change方法
selectDeme.onChange(function(value){
    // value 为改变后的值
    // this 指向当前 Input 对象
});

// 清除下拉菜单结果
selectDeme.clear();
</code></pre>


</div>